<script setup lang="ts">
import { defineProps, reactive, h, ref, onMounted } from 'vue'
import { DataTableColumns, NDataTable, NCode, NCard, NDivider, NScrollbar, NIcon } from 'naive-ui'

import { NTooltip, useMessage } from 'naive-ui'

import { LogoNodejs, LogoJavascript } from '@vicons/ionicons5'

import { Entity, javaTypeToTsType } from '../entities/Entity'
import { buildJSON, buildTsEntitiesScript, mergeEntity, getFieldFullType } from '../entities/Entity'

import hljs from '../utils/HighLight'

import KeywordsView from './KeywordsView.vue'
import ipc, { selectDirectory } from '../utils/IPC'

interface Props {
    data: Array<Entity>
    entities?: Map<string, Entity> | never
}

const message = useMessage()

const props = defineProps<Props>()

const entity = ref<Entity>({ className: '', fieldList: [] })

onMounted(() => {
    entity.value = mergeEntity(props.data)
})

const renderType = (v) => {
    if (v.genericClassChain && v.genericClassChain.length > 0) {
        const keywords = v.genericClassChain.map((item) => {
            return javaTypeToTsType(item)
        })
        return h(
            KeywordsView,
            {
                onKeywordSelect: (keyword) => {
                    message.info(`你选择了关键词${keyword}`)
                },
                keywords: keywords
            },
            getFieldFullType(v)
        )
    }
    return h(
        KeywordsView,
        { keywordsColor: '#00FF00', keywords: [] },
        javaTypeToTsType(v.fieldType)
    )
}

const columns = reactive<DataTableColumns>([
    {
        title: '字段名称',
        key: 'fieldName'
    },
    {
        title: '字段类型',
        key: 'fieldType',
        render: renderType
    },
    {
        title: '说明',
        key: 'description'
    },
    {
        title: '示例',
        key: 'valueExample'
    }
])

const doCopyJson = () => {
    navigator.clipboard
        .writeText(buildJSON(props.data))
        .then(() => {
            message.info('复制成功')
        })
        .catch(() => {
            message.error('复制失败')
        })
}

const doCopyTSObject = () => {
    selectDirectory()
    navigator.clipboard
        .writeText(buildTsEntitiesScript(props.data))
        .then(() => {
            message.info('复制成功')
        })
        .catch(() => {
            message.error('复制失败')
        })
}
</script>

<template>
    <n-scrollbar class="sb">
        <n-card title="数据示例" size="small">
            <template #header-extra>
                <n-tooltip>
                    <template #trigger>
                        <n-icon
                            size="18"
                            :component="LogoNodejs"
                            class="click"
                            @click="doCopyJson"
                        ></n-icon>
                    </template>
                    复制为JSON
                </n-tooltip>
                <n-tooltip>
                    <template #trigger>
                        <n-icon
                            size="18"
                            :component="LogoJavascript"
                            class="click"
                            @click="doCopyTSObject"
                        ></n-icon>
                    </template>
                    复制为TS类型
                </n-tooltip>
            </template>
            <n-code :code="buildJSON(props.data)" language="json" :hljs="hljs" word-wrap></n-code>
        </n-card>
        <n-divider />
        <n-card title="字段说明" size="small">
            <n-data-table :columns="columns" :data="entity.fieldList" :bordered="false" />
        </n-card>
    </n-scrollbar>
</template>
<style scoped>
.sb {
    max-height: 100vh;
}

.fn {
    border-radius: 3px;
    border-width: 1px;
    width: 5rem;
}
</style>
